var arr=[];


var cartArr = [];


window.onload = function () {
	showGoodsList(getLocalGoodsListData());
	
	//render(getLocalCartData());
}


function showGoodsList(arr){
	
	var list_ul = document.querySelector(".list_ul");
	list_ul.innerHTML = "";
	
	for (var i=0;i<arr.length;i++){
		list_ul.innerHTML +=
			`
		<li data-id="${ arr[i].goodsid }">
				<img src="${ arr[i].image }" >
				<div class="good_title mt5">
					${ arr[i].name }
				</div>
				<div class="price mt5">
					${ arr[i].price }元
				</div>
				<button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
					加入购物车
				</button>
		</li>
		
		`;
	}
	
}
//三目运算
function getLocalCartData(){
	cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr):[];
	return cartArr;      //结果返回到cartArr
}
//获取本地商品数据
function getLocalGoodsListData(){
	arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
	return arr;     //本地商品数据返回arr
}

function addCart(goodsId,img,goodsName,price){
	var count = 1;
	var xiaoji = price / 1 * count;
	var obj = {
		id: goodsId,
		src: img,
		title: goodsName,
		price: price,
		count: count,
		xiaoji: xiaoji.toFixed(2),
		time: new Date().toLocaleTimeString()
	}

	addData(obj);
}

function addData(obj){
	
}
function addData(obj){
	cartArr = getLocalCartData();
	var result = cartArr.some(function(item,index){
		return item.id===obj.id
	 	
	})
	if(result){
		jia(obj.id);
		return;
	}
	cartArr.push(obj);
	localStorage.cartArr=JSON.stringify(cartArr);
	
	render(cartArr);
	
}
function render(cartArr) {
	var tbody = document.querySelector('tbody');
	tbody.innerHTML = "";
	var str = "";
	var sum = 0;
	for (var i = 0; i < cartArr.length; i++) {
		str += `
			
				<tr>
					<td>
						<input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${ cartArr[i].id }"/>
					</td>
					<td>
						<p>
							<img src="${ cartArr[i].src }" >
							<br>
							<span>${ cartArr[i].title }</span>
						</p>
					</td>
					<td>
						<button type="button" class="btn" onclick="jian(${ cartArr[i].id })">-</button>
						<input disabled type="number" name="" id="" value="${ cartArr[i].count }" class="count"/>
						<button type="button" class="btn" onclick="jia(${ cartArr[i].id })">+</button>
					</td>
					<td>
						<span>${ cartArr[i].price }元</span>
					</td>
					<td>
						${ cartArr[i].xiaoji }
					</td>
					<td>
						<button type="button" onclick="del(${ cartArr[i].id })">删除</button>
					</td>
					<td>
						${ cartArr[i].time }
					</td>
					
				</tr>
		
		`
		sum = sum / 1 + cartArr[i].xiaoji / 1
	}

	tbody.innerHTML = str;
	document.getElementById("sum").innerHTML = sum;
}

function jian(id) {
	console.log("id:", id);
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, index) {
		if (item.id == id) {
			if (item.count > 1) {
				item.count--;
				item.xiaoji = (item.count * item.price).toFixed(2);
			}
		}
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}
function jia(id) {
	console.log(id);
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, index) {
		if (item.id == id) {
			item.count++;
			item.xiaoji = (item.count * item.price).toFixed(2);
		}
	});
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}
function jia(id) {
	console.log(id);
	cartArr = getLocalCartData();
	cartArr.forEach(function (item, index) {
		if (item.id == id) {
			item.count++;
			item.xiaoji = (item.count * item.price).toFixed(2);
		}
	});
	localStorage.cartArr = JSON.stringify(cartArr);
	render(cartArr);
}

function del(id) {

	cartArr = getLocalCartData();

	cartArr = cartArr.filter(function (item, index) {
		return item.id != id
	})
	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}

var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick = function () {
	var danxuanList = document.querySelectorAll(".danxuan");
	for (let index = 0; index < danxuanList.length; index++) {
		danxuanList[index].checked = quanxuan.checked;
	}
}


var delChecked = document.getElementById("delChecked");
delChecked.onclick = function(){

	cartArr = getLocalCartData();
	var danxuanList = document.querySelectorAll(".danxuan:checked");
	for (let i = 0; i < danxuanList.length; i++) {
		
		cartArr.forEach(function(item,index){
			if(item.id === danxuanList[i].getAttribute("data-id")){
				cartArr.splice(index,1)
			}
		})
		
	}

	localStorage.cartArr = JSON.stringify(cartArr);
	render(getLocalCartData());
}
